<template>
	<view class="container">
		<Card>
			<view class="text-center text-accent">取消后将不会为你保留预留名额</view>
		</Card>

		<view class="order">
			<Card>
				<view class="head flex justify-between items-center">
					<text class="text-primary">德记楼·老北京烤鸭(领袖天地店)</text>
					<image src="@/static/order/icon_arrow_right_primary.png" />
				</view>
				<view class="divider" />
				<view class="row">
					<text>项目名称：</text>
					<text>家庭聚餐3-4人</text>
				</view>
				<view class="row">
					<text>到店时间：</text>
					<text>9-22 12:00-13:00</text>
				</view>
				<view class="row">
					<text>到店人数：</text>
					<text>4人</text>
				</view>
				<view class="row">
					<text>预约人：</text>
					<text>李四 18859595959</text>
				</view>
				<view class="row">
					<text>实付金额：</text>
					<text class="text-accent">¥399.00</text>
				</view>
			</Card>
		</view>

		<view class="text-accent" style="font-size: 24rpx;">请勾选退款原因以帮助我们改善服务</view>

		<view class="options">
			<Card>
				<uni-data-checkbox v-model="reason" :localdata="options" />
			</Card>
		</view>
		
		<view class="submit">确认取消</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import Card from '@/components/Card/index.vue'

	const reason = ref()

	const options = [{
		text: '计划有变，不想去了',
		value: 0
	}, {
		text: '预约时间调整，想重新预约',
		value: 1
	}, {
		text: '商家通知我无法接待',
		value: 2
	}, {
		text: '商家沟通态度差',
		value: 3
	}, {
		text: '其他',
		value: 4
	}]
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		padding: 32rpx 28rpx 140rpx;
		background: $body-bc;
		color: $content-color;
		font-size: 26rpx;

		.order {
			margin: 22rpx 0 30rpx;

			::v-deep .card {
				padding: 36rpx 30rpx;
			}

			.head {
				text {
					font-size: 30rpx;
				}

				image {
					width: 11rpx;
					height: 21rpx;
				}
			}

			.divider {
				height: 1rpx;
				margin: 30rpx 0 32rpx;
				background-color: $border-color;
			}

			.row+.row {
				margin-top: 18rpx;
			}
		}

		.options {
			margin-top: 30rpx;

			::v-deep .card {
				padding: 15rpx 26rpx;
			}

			::v-deep .checklist-group {
				flex-direction: column;

				.checklist-box {
					margin: 17rpx 0;

					.checklist-content .checklist-text {
						margin-left: 20rpx;
						font-size: 26rpx;
						color: $content-color;
					}

					.radio__inner {
						width: 36rpx;
						height: 36rpx;
						background-color: transparent;
						border-color: $primary-color;

						.radio__inner-icon {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.checklist-box.is--default.is-checked .checklist-text {
					color: $content-color;
				}
			}
		}
		
		.submit {
			width: 75%;
			margin: 73rpx auto 0;
			padding: 26rpx 0;
			// border: 1rpx solid $primary-color;
			border-radius: 15rpx;
			font-size: 30rpx;
			color: $primary-color;
			text-align: center;
			background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/merchant_bc.png) no-repeat center / 100% 100%;
		}
	}
</style>